<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // async 这个修饰符
        //   1 需要定义在函数的前面
        //   2 会把函数变成异步，但是函数内部是同步的  await
        //   3 默认帮我们返回了一个promise实例，且把这个函数的返回值作为新的Promise实例的成功的值
        //   4 为 await服务的 

        // await 这个修饰符
        //   1 必须在async这个函数中，且他们之间不能嵌套其他的函数
        //   2 写在函数调用的前面(通常这个函数要求必须是一个promise实例) ， 把这个实例成功的值作为这个函数的最终返回值

        // async和await  是异步的最终解决方案   基于promise









        function f1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(1);
                    // reject(2222222222222)   // 错误
                }, 1000)
            })
        }

        function f2() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(2);
                }, 500)
            })
        }


        function f3() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(3);
                }, 100)
            })
        }



        // f1().then(res => {
        //     console.log(res);
        // })

        // f2().then(res => {
        //     console.log(res);
        // })

        // f3().then(res => {
        //     console.log(res);
        // })

        // then 链式调用
        // all
        // allSettled


        // 让整个函数变成了异步，但是函数里面看起来的是同步的
        // async function fn() {
        //     // await 把promise成功的结果作为了函数的返回值
        //     let a = await f1() ;
        //     let b = await f2() ;
        //     let c = await f3() ;
        //     console.log(a);   // 1
        //     console.log(b);   // 2
        //     console.log(c);   // 3
        // }

        // fn()


        // console.log(777);





        // async 和 await 直接不能插入其他的函数
        async function ff() {
            const arr = [f1, f2, f3];

            // 此处forEach得不到顺序的结果
            // arr.forEach(async function(v) {
            //     let a = await v() ;
            //     console.log(a);
            // })

            // 三个异步函数不会等待，只有函数内部会等待
            // async function d1() {
            //     let a = await f1() ;
            //     console.log(a);
            // }

            // async function d1() {
            //     let a = await f2() ;
            //     console.log(a);
            // }

            // async function d1() {
            //     let a = await f3() ;
            //     console.log(a);
            // }



            for(let i = 0 ; i < arr.length ; i++) {
                let a = await arr[i]() ;
                console.log(a);
            }

            // let a = await arr[0]();
            // console.log(a);

            // let a = await arr[1]();
            // console.log(a);

            // let a = await arr[2]();
            // console.log(a);


        }

        ff()



        // async function fo() {
        //     return 2
        // }


        // fo().then(res => {
        //     console.log(res);
        // })


    </script>

</body>

</html>